<template>
    <div class="vux-1px-t">
        <group>

            <swipeout>
                <swipeout-item v-for="(item,index) in blanklists" :key="index" @on-close="handleEvents('on-close')"
                               @on-open="handleEvents('on-open')"
                               transition-mode="follow">
                    <div slot="right-menu">
                        <swipeout-button @click.native="item.IsDefault?'':setDefault(item.BindID)"
                                         :type="item.IsDefault?'default':'primary'">设为默认
                        </swipeout-button>
                        <swipeout-button @click.native="deleteCard(item.BindID)" type="warn">删除
                        </swipeout-button>
                    </div>
                    <div slot="content" class="vux-1px-tb">
                        <cell :title="`${item.BankName}${item.IsDefault?'(默认)':''}`"
                              :inline-desc='item.CardNumber'
                        ></cell>
                    </div>
                </swipeout-item>
            </swipeout>
        </group>
        <group>
            <x-button type="primary" @click.native="jumpaddcard">新增银行卡</x-button>
        </group>
    </div>
</template>

<script>
    import {getMytoken} from '../../../service/common';
    import {getBlankCardListsR, deleteBlankCard, setDefalutCardR} from '../../../service/my';
    import {GroupTitle, Swipeout, SwipeoutItem, SwipeoutButton, XButton, Cell, Group} from 'vux'
    import {Countdown} from '../../../uitls/timer';
    import {isphone} from '../../../uitls/common';
    import {concat, findIndex, propEq, remove} from 'ramda';

    export default {
        components: {
            GroupTitle,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            XButton,
            Cell,
            Group
        },
        data() {
            return {
                phone: '',
                yzm: '',
                countTime: '获取验证码',
                sending: false,
                RandomGuid: '',
                blanklists: []
            };
        },
        created() {
            this.getblankcardlist();
        },
        computed: {},
        methods: {
            async setDefault(id){
                this.$vux.confirm.show({
                    title: '设置默认',
                    content: '是否要设置此卡默认',
                    onCancel () {

                    },
                    onConfirm: async() => {
                        const {token}=await getMytoken();
                        const {blanklists}=this;
                        if(token) {
                            const {data}=await setDefalutCardR({UserIDGuid: token, BindID: id});
                            if(data && data.code === 0) {
                                this.$vux.toast.text('设置成功');
                                this.getblankcardlist();
                            }
                            else {
                                this.$vux.toast.text(data.msg);
                            }
                        }
                    }
                })

            },
            handleEvents (type) {
                console.log('event: ', type)
            },
            async getblankcardlist(){
                const {token}=await getMytoken();
                const {data}=await getBlankCardListsR({UserIDGuid: token});
                if(data && data.code === 0) {
                    this.blanklists = data.data;
                    console.log(this.blanklists)
                }
            },
            async renzphone(){
                const {token}=await getMytoken();
                const {phone, yzm, RandomGuid}=this;

                const {data}=await bindRealNameR({
                    TypeID: 7,
                    UserIDGuid: token,
                    Mobile: phone,
                    ValidCode: yzm,
                    RandomGuid
                });
                if(data && data.code === 0) {
                    this.$vux.toast.text('绑定成功');
                    this.$router.replace('/my/center');
                }
                else {
                    this.$vux.toast.text('请输入正确手机号');
                }

            },
            async sendmsg(){
                const {phone}=this;
                const {token}=await getMytoken();
                if(isphone(phone)) {
                    this.countdown();
                    const {data}=await sendMsgR({TypeID: 2, UserIDGuid: token, Mobile: phone});
                    if(data && data.code === 0) {
                        this.RandomGuid = data.data.RandomGuid;
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                    return;
                }
                this.$vux.toast.text('请输入正确手机号');

            },
            countdown(){
                this.sending = true;
                let countdowns = new Countdown(59000, (data, isend)=> {
                    if(isend) {
                        this.sending = false;
                        this.countTime = `获取验证码`;
                    }
                    else {
                        this.countTime = `${data[0]}秒后获取`;
                    }
                }, 0);
                countdowns.start();
            },
            async deleteCard(id){
                this.$vux.confirm.show({
                    title: '删除提示',
                    content: '是否要删除这张银行卡',
                    onCancel () {

                    },
                    onConfirm: async() => {
                        const {token}=await getMytoken();
                        const {blanklists}=this;
                        if(token) {
                            const {data}=await deleteBlankCard({UserIDGuid: token, BindID: id});
                            if(data && data.code === 0) {
                                this.blanklists = remove(findIndex(propEq('BindID', id), blanklists), 1, blanklists)
                                this.$vux.toast.text('删除成功');
                            }
                            else {
                                this.$vux.toast.text(data.msg);
                            }
                        }
                    }
                })

            },
            jumpaddcard(){
                this.$router.push(`/my/center/addblankcard`)
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../../app";

    .item () {
        height: 120px;
        box-sizing: border-box;
        border-bottom: 1px solid @color12;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        &:last-child {
            border: none;
        }
        .ranknum {
            border-radius: 50%;
            background: #f3f3f3;
            font-size: @fz26;
            color: @color2;
            width: 38px;
            .setnormalcss(38px);
            box-shadow: 0 2px 1px #b2b2b2;
            font-weight: bolder;
            &.r {
                width: 37px;
                height: 52px;
            }

            &.r0 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160543.png) no-repeat center;
                background-size: contain;
            }
            &.r1 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160544.png) no-repeat center;
                background-size: contain;
            }
            &.r2 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160545.png) no-repeat center;
                background-size: contain;
            }
        }
        .imghead {
            width: 88px;
            height: 88px;
            margin-right: 30px;
            position: relative;
            i {
                position: absolute;
                background: @color22;
                color: #fff;
                width: 30px;
                font-size: @fz24;
                .setnormalcss(30px);
                border-radius: 50%;
                right: -10px;
                top: 0;
                display: block;
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #bebfbf;
            }
        }
        .middlename {
            flex: 1;
            display: flex;
            align-items: center;
            strong {
                font-size: @fz32;
                font-weight: bolder;
            }
            em {
                border: 1px solid @color22;
                border-radius: 32px;
                display: inline-block;
                .setnormalcss(32px);
                color: @color22;
                font-size: @fz24;
                width: 120px;
                margin-left: 10px;
            }
        }
        .rednum {
            display: flex;
            flex-direction: column;
            text-align: center;
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
    }

    .attentiongod {
        height: 100%;
    }
    .vux-1px-tb:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #C7C7C7;
        color: #C7C7C7;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    .vux-1px-tb:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #C7C7C7;
        color: #C7C7C7;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    .listcon {
        li {
            .item();
        }
    }
</style>